<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>搜索</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			.mui-bar-nav~.mui-content{position:absolute;left:0;height:100%;overflow:auto;}
			.mui-bar-nav.mui-bar .mui-icon{color:#333;}
			/*搜索框*/
			.mui-search{width:4.76rem;margin:.07rem auto 0 .8rem;float:left;clear:none;}
			.mui-bar input[type=search]{height:.65rem;color:#999;font-size:.28rem;background:#f3f3f3;margin:0;border-radius:.8rem;padding-left:36px;}
			.mui-input-row.mui-search .mui-icon-speech{top:.1rem;font-size:18px;}
			.mui-input-row.mui-search .mui-icon-clear{top:.12rem;font-size:18px;}
			.mui-search .mui-placeholder{font-size:14px;/*line-height:35px;*/text-align:left;}
			.mui-search .mui-placeholder .mui-icon{font-size:18px;margin:8px 5px 0 10px;float:left;color:#a0a0a0;}
			.mui-bar .mui-search:before{font-size:18px;color:#a0a0a0;margin-left:10px;margin-right:5px;}
			.mui-bar .mui-input-row .mui-input-clear~.mui-icon-clear, .mui-bar .mui-input-row .mui-input-speech~.mui-icon-speech{color:#a0a0a0;/*top:.03rem*/}
			/*搜索菜单*/
			.search_top{width:100%;float:left;/*margin:1.1rem 0 .35rem 0;*/}
			.search_top>ul{width:5.1rem;overflow:hidden;margin:0 auto;padding:0;}
			.search_top>ul>li{width:1.25rem;float:left;text-align:center;}
			.search_top>ul>li>a{display:block;width:100%;height:100%;}
			.search_top>ul>li .box_img{width:.68rem;height:.69rem;overflow:hidden;background:#dddddd;border-radius:.08rem;display:inline-block;}
			.search_top>ul>.list01 .box_img>img{width:.34rem;margin-top:.16rem;}
			.search_top>ul>.list02 .box_img>img{width:.5rem;margin-top:.2rem;}
			.search_top>ul>.list03 .box_img>img{width:.5rem;margin-top:.15rem;}
			.search_top>ul>.list04 .box_img>img{width:.38rem;margin-top:.15rem;}
			.search_top>ul>li .menu_text{width:100%;text-align:center;color:#b6b5b5;marign:0;line-height:.38rem;text-align:center;font-size:.28rem;}
			/*历史记录*/
			.hostory_title{width:100%;float:left;height:.85rem;line-height:.85rem;font-size:.32rem;box-sizing:border-box;padding-left:.33rem;color:#333;}
		    .hostory_list{width:100%;float:left;background:#fff;}
			.hostory_list>a{display:block;width:7.2rem;float:right;height:.87rem;line-height:.87rem;border-bottom:1px solid #d4d4d4;}
			.hostory_list>a>i{width:.35rem;height:.37rem;display:block;float:left;background:url(../../images/index/time.png) no-repeat;background-size:100% auto;margin:.25rem .12rem 0 .1rem;}
			.hostory_list>a>span{width:6.45rem;float:left;color:#808080;font-size:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
			/*清除历史*/
			.clear_hostory{width:100%;line-height:.9rem;font-size:.3rem;color:#333;text-align:center;}
			.clear_hostory>.mui-icon-trash{font-size:.4rem;color:#333;}
			
		</style>
	</head>
	<body>
		<!--公共头部-->
		<div class="mui-bar mui-bar-nav white_bar_nav" id="header">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<div class="mui-input-row mui-search">
				<input id="search" type="search" class="mui-input-speech mui-input-clear" placeholder="请输入您要搜索的关键字">
			</div>
		</div>
		<div class="mui-content" id="app">
			<div class="search_top">
				<ul>
					<li class="list01">
						<a>
							<span class="box_img"><img src="../../images/index/searchicon01.png"></span>
							<p class="menu_text">办事指南</p>
						</a>
					</li>
					<li class="list02">
						<a>
							<span class="box_img"><img src="../../images/index/searchicon02.png"></span>
							<p class="menu_text">新闻关注</p>
						</a>
					</li>
					<li class="list03">
						<a>
							<span class="box_img"><img src="../../images/index/searchicon03.png"></span>
							<p class="menu_text">政策法规</p>
						</a>
					</li>
					<li class="list04">
						<a>
							<span class="box_img"><img src="../../images/index/searchicon04.png"></span>
							<p class="menu_text">常见问题</p>
						</a>
					</li>
				</ul>
			</div>
		    <h5 class="hostory_title" >历史记录</h5>
		    <!--历史记录列表-->
		    <div class="hostory_list" id="hostoryDiv">
		    	<template v-for="kws in kwsList"  v-if="hot_show">
				<a>
			    		<i class="time"></i>
			    		<span :oid="kws" class="kwsSpan">{{kws}}</span>
			    	</a>
			</template>
		    	
		    	<div class="clear_hostory" onclick="cleanKws()" v-if="clean_show">
		    		<i 	class="mui-icon mui-icon-trash" ></i>清除所有记录
		    	</div>
		    </div>
		    
		</div>
		<script>
			function my_immersed(immersed){
				var isAndroid = false;
				document.getElementById("header").style.paddingTop = immersed + 'px';
				document.getElementById("header").style.height = (44 + immersed) + 'px';
				var sysinfo_str = localStorage.getItem('KEY_SYS_INFO');
				var sysinfo = JSON.parse(sysinfo_str);
				isAndroid = sysinfo.name == 'Android';
				if(isAndroid){
					document.getElementById("app").style.marginTop = '2.0rem';
				}else{
					document.getElementById("app").style.marginTop = '1.0rem';
				}
			}
		</script>
		<script type="text/javascript" src="../../js/immersed.js" ></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/common.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/vue.min.js"></script>
		<script>
			mui.plusReady(function(){
				closeWaitingAndShowView(); 
				initKwsHis();
			})
			
			var kws_vue = new Vue({
				el: '#hostoryDiv',
				data: {
					hot_show:false,
					clean_show:false,
					kwsList:[]
				}					  
			});
			
			var initKwsHis = function() {
				var html = '';
				var kws = localStorage.getItem(SYS_PARAM.KEY_KWS);
				if(!kws) return;
				kws = kws.split(',');
				var kwsArr = new Array();
				for(var ii = kws.length - 1; ii >= 0; ii--) {
					kwsArr.push(kws[ii]);
				}
				kws_vue.hot_show = true;
				kws_vue.clean_show = true;
				kws_vue.kwsList = kwsArr;
			}
			
			//搜索input监听
			document.getElementById('search').addEventListener('search', function() {
				doSearch();
			});
			
			
			var doSearch = function() {
				utils.showWaiting();
				var kw = document.getElementById("search").value;
				var url = 'appHttpFullSearch/appClassiSearchResult.do';
				var param = 'keyWord=' + kw+ '&districtId=' +getCurrentDistrictId() ;
				utils.ajax(url, function(data) {
					var kws = localStorage.getItem(SYS_PARAM.KEY_KWS);
					if(!kws) {
						kws = [kw];
					} else {
						kws = kws.split(',');
						for(var i in kws) {
							if(kws[i] == kw.trim()) {
								kws.splice(i, 1);
								break;
							}
						}
						kws.push(kw);
					}
					if(kws.length > 6) {
						kws = kws.slice(kws.length - 6, kws.length);
					}
					localStorage.setItem(SYS_PARAM.KEY_KWS, kws.join(","));

					var self = plus.webview.currentWebview();
					var sub = plus.webview.getWebviewById('search_result');
					if(!sub) {
						sub = plus.webview.create('_www/src/search/search_info.html', 'search_result', {
							top: (window.immersed ? window.immersed : 0) + 44 + 'px',
							bottom: '0px'
						});
						self.append(sub);
						setTimeout(function(){
							mui.fire(sub,'initData',{'result_json': data});
							sub.show("slide-in-left", 300);
						},300);
					}else{
						mui.fire(sub,'initData',{'result_json': data});
						sub.show("slide-in-left", 300);
					}
				}, param);
			}
			
			
			mui('.hostory_list').on('tap','.kwsSpan',function(){
				document.getElementById("search").focus();
				document.getElementById("search").value=this.getAttribute('oid');
				doSearch();
			});
			
			
			function cleanKws(){
				var kws=new Array();
				localStorage.setItem(SYS_PARAM.KEY_KWS,kws.join(","));
				kws_vue.hot_show = false;
				kws_vue.clean_show = false;
			}
		</script>
	</body>
</html>
